<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <div th:replace="common/common::html"></div>
    <title th:text="#{user.info}">Title</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;

        //页面自适应
        function resizePageSize() {
            _gridWidth = $(document).width() - 12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height() - 32 - 60; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }

        $(function () {
            resizePageSize();
            var _columnWidth = _gridWidth / 5;
            $("#flexigrid-id").flexigrid({
                width: _gridWidth,
                height: _gridHeight,
                url: /*[[@{getUserInfoListByPage}]]*/"",
                dataType: 'json',
                colModel: [
                    {display: 'userUuid', name: 'userUuid', width: 150, sortable: false, align: 'center', hide: 'true'},
                    {
                        display: /*[[#{user.name}]]*/"",
                        name: 'userName',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{user.nick}]]*/"",
                        name: 'niceName',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{user.mobile}]]*/"",
                        name: 'mobile',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{user.email}]]*/"",
                        name: 'email',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{common.operation}]]*/"",
                        name: 'userUuid',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center',
                        process: function (v, _trid, _row) {
                            var htmlContent = '<a href="#" onclick="deleteUser(\'' + v + '\')"><i class="glyphicon glyphicon-minus" style="color: #2f332a"></i></a>'
                            return htmlContent;
                        }
                    }
                ],
                resizable: false, //resizable table是否可伸缩
                useRp: true,
                usepager: true, //是否分页
                autoload: false, //自动加载，即第一次发起ajax请求
                hideOnSubmit: true, //是否在回调时显示遮盖
                showcheckbox: true, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata: true
            });
            queryBtn();
            $("#query-btn-id").click(function (event) {
                event.stopPropagation();
                queryBtn();
            })
            $("#confirm-user-del-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{user.delete.tip.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            var userUuid = $("#confirm-user-del-id").attr("userUuid");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType: 'json',
                                url: /*[[@{deleteUserById}]]*/'',
                                data: [{name: "userUuid", value: userUuid}],
                                success: function (data) {
                                    message(data.msg);
                                    $("#confirm-user-del-id").dialog("close");
                                    queryBtn();
                                },
                                error: function (msg) {
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("#allocate-btn-id").click(function (event) {
                event.stopPropagation();
                // $("#allocate-dialog-id").dialog('open');
                allocateZtree();
            })

            $("#allocate-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.role.allocate}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var roleIds = [];
                            var ztreeObj = $.fn.zTree.getZTreeObj("allocate-role-user-ztree-id");
                            var nodes = ztreeObj.getCheckedNodes(true);
                            $(nodes).each(function (index,item) {
                                roleIds.push(item.id);
                            });

                            var userUUid = $("#allocate-role-user-ztree-id").attr("userUUid");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{allocateRoleByUser}]]*/'',
                                data: [{name:"userUuid",value:userUUid},
                                    {name:"roleArray",value:roleIds}],
                                success: function (data) {
                                    message(data.msg);
                                    $("#allocate-role-user-dialog-id").dialog('close');
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
        });//ready

        function queryBtn() {
            var searchUserName = $("#search-user-name-id").val();
            $("#flexigrid-id").flexOptions({
                extParam: [
                    {name: "searchUserName", value: searchUserName}
                ]
            }).flexReload();
        }

        function deleteUser(userUuid) {
            $("#confirm-user-del-id").attr("userUuid", userUuid);
            $("#confirm-user-del-id").dialog('open');
        }

        var allocateSetting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        function allocateZtree() {
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            if(ids.length !== 1){
                message(/*[[#{common.select.one}]]*/'');
                return;
            }
            $("#allocate-dialog-id").attr("userUUid",ids);
            // }
            $.ajax({
                    type: 'post',
                async: false,
                    dataType : 'json',
                    url: /*[[@{getRoleZtreeListByUserId}]]*/'',
                    data: [{name:"userUuid",value:ids}],
                    success: function (data) {
                        $.fn.zTree.init($("#allocate-user-ztree"), allocateSetting, data);
                        $("#allocate-dialog-id").dialog('open');
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }
    </script>
</head>
<body>
<div>
    <span th:text="#{user.info}"></span>
    <input type="text" id="search-user-name-id" th:placeholder="#{user.name}">
    <a href="#" id="query-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-zoom-in"></i>
        <span th:text="#{common.query}"></span>
    </a>
    <a href="#" id="allocate-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-tower"></i>
        <span th:text="#{user.role.allocate}"></span>
    </a>
</div>
<table id="flexigrid-id"></table>
    <div id="confirm-user-del-id" style="display: none">
         <span th:text="#{user.delete.tip.info}"></span>
    </div>
    <div id="allocate-dialog-id" style="display: none">
        <ul id="allocate-user-ztree" class="ztree">

        </ul>
    </div>
</body>
</html>